<template>
  <div class="service-detail">
    <div class="adv" @click="gotoService">
      <img src="https://gdpage.cfbond.com/goldeye/image/services/adservice.png"/>
    </div>
    <div class="service-title">
      {{ detail.title }}
    </div>
    <div class="service-content">
      <template v-if="!showAll">
        <div v-html="detail.desc">{{ detail.desc | truncate }}</div> <span v-show="detail.desc.length > 0" class="expand" @click="expand">展开</span>
      </template>
      <template v-else>
        <div v-html="detail.desc">{{ detail.desc }}</div>
      </template>
    </div>
    <div class="service-title">
      适宜人群
    </div>
    <div class="service-content" v-html="detail.pub_person">
    </div>

     
  </div>
</template>

<script>
/**
 * 服务详情介绍页
 */
import {getServiceDetail} from '@/api/warning';
import getParam from '@/utils/getParam';
import IngotCookie from '@/utils/cookie.js';

export default {
  name: 'ServiceIntro',
  data() { 
    return {
      showAll: false,
      detail: {
        title: '',
        desc: '',
        pub_person: '',
      }
    };
  },
  created() {
    this.$store.commit('set_top_title','服务详情');
  },
  mounted() {
    getServiceDetail({
      service_id: getParam('service_id') //'068e2d907375393375d9c026e5e4ce0c'
    }).then((res) => {
      if(Object.prototype.toString.call(res.data) === '[object Array]' && res.data.length > 0) {
        console.log('detail:',res.data[0])
        this.detail = res.data[0];
        if (this.detail.title.length > 120){
          this.showAll = false;
        } else {
          this.showAll = true;
        }
      } else {
        console.log('无数据');
      }
    })
  },
  methods: {
    // 跳转到客户端专属服务
    gotoService() {
      // alert('跳到广告');
      console.log('正在跳转到专属广告....');
      if(IngotCookie.get('source')=='ios'){
      //if (navigator.userAgent.match(/ios/ig)) {
        console.log('ios客户端开始跳转...');
        window.webkit.messageHandlers.NoticeNeedsJumpAD.postMessage('service');
      } else if(IngotCookie.get('source')=='android'){
      // } else if(navigator.userAgent.match(/Android/ig)){
        console.log('安卓客户端开始跳转..');
        window.AndroidWebView.NoticeNeedsJumpAD();
      }
    },
    expand() {
      this.showAll = true;
    }
  }
};
</script>

<style>
.service-detail{
  padding: 0 19px;
  text-align: left;
  margin-bottom: 52px;
}
.service-detail .adv{
  width: 292px;
  margin: 0 auto;
  text-align: center;
  padding: 18px 0 12px;
}
.service-detail .adv img{
  width: 292px;
  margin: 0;
  padding: 0;
}
.service-title{
  font-size: 15px;
  line-height: 20px;
  color: #222;
  font-weight: bold;
  padding-bottom: 13px;
}
.service-content{
  font-size: 14px;
  color: #222;
  line-height: 22px;
  padding-bottom: 22px;
}
.service-detail .expand{
  color:#D4B686;
  font-size:13px;
  line-height: 22px;
}

</style>